<template>
    <div class="footer">
        <div class="wrapper">
            <div class="nav">
                <ul class="clearfix">
                    <li><a href="/">首页</a></li>
                    <li><a href="javascript:;">广告服务</a></li>
                    <li><a target="_blank" href="https://gjypzc.taobao.com/">纸质入口</a></li>
                    <li><a href="javascript:;">诚聘英才</a></li>
                    <li><a href="javascript:;">用户指南</a></li>
                    <li><a href="javascript:;">联系我们</a></li>
                </ul>
            </div>
            <div class="contact-wrapper">
                <div class="contact">
                    <ol>
                        <li class="addr">
                            <img src="../assets/images/icon/location.png"/>广州市白云区云城街机场路1718号631室
                        </li>
                        <li class="mobile">
                            <img src="../assets/images/icon/phone.png"/>
                            020-37737622
                        </li>
                        <li class="wechat">
                            <img src="../assets/images/icon/wechat.png"/>
                            fairy4802004
                        </li>
                        <li class="qq">
                            <img src="../assets/images/icon/QQ.png"/>
                            3137597228
                        </li>
                        <li class="email">
                            <img src="../assets/images/icon/email.png"/>
                            gjypzc@qq.com
                        </li>
                    </ol>
                </div>
                <div class="concern">
                    <h2><Icon type="heart"></Icon>&nbsp;&nbsp;关注我们</h2>
                    <img src="../assets/images/icon/qrcode.png" title="关注我们" alt="关注我们" width="150"/>
                </div>
            </div>
        </div>
        <div class="copyright-text">
            <p>Copyright © 广州佳鑫医药科技有限公司</p>
            <p><a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备17013101号-1</a></p>
        </div>
    </div>
</template>
<style type="text/css" scoped>
    .footer{ background:#333;}
    .wrapper{ max-width:900px; margin:0 auto; position: relative; overflow: hidden; padding-top: 35px;}
    .nav{ margin: 0 auto; display:flex; justify-content:start;}
    .nav ul li{ float: left; margin-right: 35px;}
    .nav ul li:last-of-type{ margin:0;}
    .nav ul li a{ display:block; color:#fff; line-height: 22px;}
    .nav ul li a:hover{ color:#ccc;}
    .contact-wrapper{ display:flex; justify-content:space-between; margin-top:36px; margin-bottom:20px;}
    .contact li{ color:#fff; margin-bottom: 18px; line-height: 24px; display:flex; justify-content:start;}
    .contact li img{ margin-right:7px; display:inline-block;}
    .concern{ margin-left:20px; }
    h2{ color:#fff; line-height:22px; margin-bottom:18px;}
    .copyright-text{ 
        color:#fff; text-align:center; line-height:22px; background:#222; padding:4px 0; font-size:12px;
    }
    .copyright-text a{
        color:#fff;
    }
    @media (max-width:1024px){
        .wrapper{ width:auto; }
        .nav{ justify-content:center; padding:0 15px;}
        .contact-wrapper{ justify-content:center; }
    }
    @media (max-width:768px){
        .contact-wrapper{ display:block; }
        .contact ol li{ justify-content:center; }
        .concern{ margin:0; text-align:center; }
        .concern img{ margin: 0 auto; }
    }
</style>